<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>技术小馆</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
            background-color: #f9f9f9;
        }
        .hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            position: relative;
            overflow: hidden;
        }
        .hero-content {
            position: relative;
            z-index: 2;
        }
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
            opacity: 0.1;
            z-index: 1;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .card {
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            border-radius: 8px;
            overflow: hidden;
            background: white;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        .highlight {
            background: linear-gradient(90deg, rgba(102,126,234,0.1) 0%, rgba(118,75,162,0.1) 100%);
            border-left: 4px solid #667eea;
            padding: 1.5rem;
            border-radius: 0 8px 8px 0;
        }
        .footer {
            background-color: #1a1a1a;
            color: #f1f1f1;
        }
        .footer a {
            color: #f1f1f1;
            transition: color 0.3s ease;
        }
        .footer a:hover {
            color: #667eea;
            text-decoration: none;
        }
        .drop-cap::first-letter {
            font-size: 3.5rem;
            float: left;
            line-height: 0.8;
            margin: 0.15em 0.1em 0 0;
            color: #667eea;
            font-family: 'Noto Serif SC', serif;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero py-20 px-4 md:py-32 text-center">
        <div class="max-w-4xl mx-auto hero-content">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">探索技术的无限可能</h1>
            <p class="text-xl md:text-2xl mb-8 opacity-90">在数字时代中寻找创意的火花</p>
            <div class="inline-flex items-center">
                <span class="mr-4 text-lg"><i class="fas fa-rocket mr-2"></i>前沿技术</span>
                <span class="mr-4 text-lg"><i class="fas fa-lightbulb mr-2"></i>创新思维</span>
                <span class="text-lg"><i class="fas fa-users mr-2"></i>社区分享</span>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="max-w-6xl mx-auto px-4 py-12">
        <!-- Featured Article -->
        <article class="card mb-16">
            <div class="md:flex">
                <div class="md:w-1/2">
                    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" 
                         alt="Technology" 
                         class="w-full h-full object-cover">
                </div>
                <div class="md:w-1/2 p-8">
                    <div class="flex items-center mb-4">
                        <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-3 py-1 rounded-full">最新文章</span>
                        <span class="text-gray-500 ml-4 text-sm"><i class="far fa-clock mr-1"></i>2023年11月15日</span>
                    </div>
                    <h2 class="text-2xl md:text-3xl font-bold mb-4">Web开发的未来趋势：从静态到智能</h2>
                    <p class="text-gray-600 mb-6">随着人工智能和机器学习技术的进步，Web开发正在经历一场革命性的变革。开发者不再仅仅是编写静态页面，而是构建能够学习、适应和预测用户需求的智能系统...</p>
                    <div class="flex justify-between items-center">
                        <a href="#" class="text-blue-600 font-medium hover:text-blue-800 transition-colors">阅读全文 <i class="fas fa-arrow-right ml-1"></i></a>
                        <div class="flex space-x-2">
                            <span class="text-gray-500"><i class="far fa-eye mr-1"></i>1,245</span>
                            <span class="text-gray-500"><i class="far fa-comment mr-1"></i>24</span>
                        </div>
                    </div>
                </div>
            </div>
        </article>

        <!-- Content Grid -->
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
            <!-- Card 1 -->
            <div class="card">
                <img src="https://images.unsplash.com/photo-1522542550221-31fd19575a2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" 
                     alt="UI Design" 
                     class="w-full h-48 object-cover">
                <div class="p-6">
                    <h3 class="text-xl font-bold mb-3">现代UI设计原则</h3>
                    <p class="text-gray-600 mb-4">探索如何创建直观、美观且功能强大的用户界面，提升用户体验和产品价值。</p>
                    <a href="#" class="text-blue-600 hover:text-blue-800 transition-colors">了解更多 <i class="fas fa-long-arrow-alt-right ml-1"></i></a>
                </div>
            </div>

            <!-- Card 2 -->
            <div class="card">
                <img src="https://images.unsplash.com/photo-1579390282655-68372eb7ff0e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" 
                     alt="Data Visualization" 
                     class="w-full h-48 object-cover">
                <div class="p-6">
                    <h3 class="text-xl font-bold mb-3">数据可视化艺术</h3>
                    <p class="text-gray-600 mb-4">掌握将复杂数据转化为清晰、有洞察力的可视化图表的技术和最佳实践。</p>
                    <a href="#" class="text-blue-600 hover:text-blue-800 transition-colors">了解更多 <i class="fas fa-long-arrow-alt-right ml-1"></i></a>
                </div>
            </div>

            <!-- Card 3 -->
            <div class="card">
                <img src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" 
                     alt="Machine Learning" 
                     class="w-full h-48 object-cover">
                <div class="p-6">
                    <h3 class="text-xl font-bold mb-3">机器学习入门指南</h3>
                    <p class="text-gray-600 mb-4">从基础概念到实际应用，了解如何将机器学习技术整合到你的项目中。</p>
                    <a href="#" class="text-blue-600 hover:text-blue-800 transition-colors">了解更多 <i class="fas fa-long-arrow-alt-right ml-1"></i></a>
                </div>
            </div>
        </div>

        <!-- Featured Content -->
        <div class="mb-16">
            <h2 class="text-3xl font-bold mb-8">核心概念与技术栈</h2>
            <div class="grid md:grid-cols-2 gap-8">
                <div class="highlight">
                    <h3 class="text-xl font-bold mb-4"><i class="fas fa-code-branch mr-2 text-blue-600"></i>前端开发</h3>
                    <p class="mb-4">现代前端开发已经远远超出了简单的HTML和CSS。React、Vue和Angular等框架使开发人员能够构建复杂的单页应用程序，而WebAssembly则开启了在浏览器中运行高性能代码的可能性。</p>
                    <div class="flex flex-wrap gap-2">
                        <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">React</span>
                        <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Vue.js</span>
                        <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">TypeScript</span>
                        <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Tailwind CSS</span>
                    </div>
                </div>
                <div class="highlight">
                    <h3 class="text-xl font-bold mb-4"><i class="fas fa-server mr-2 text-purple-600"></i>后端技术</h3>
                    <p class="mb-4">从传统的LAMP栈到现代的微服务架构，后端技术不断发展以满足日益复杂的应用需求。云原生应用、容器化和无服务器架构正在重新定义我们构建和部署应用的方式。</p>
                    <div class="flex flex-wrap gap-2">
                        <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Node.js</span>
                        <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Docker</span>
                        <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Kubernetes</span>
                        <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">GraphQL</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Data Visualization -->
        <div class="mb-16">
            <h2 class="text-3xl font-bold mb-8">技术发展路线图</h2>
            <div class="bg-white rounded-lg shadow-sm p-6">
                <div class="mermaid">
                    graph TD
                    A[互联网基础] --> B[Web 1.0 静态网页]
                    A --> C[Web 2.0 动态内容]
                    B --> D[HTML/CSS/JS]
                    C --> E[AJAX/SPA/API]
                    E --> F[Web 3.0 智能应用]
                    F --> G[AI/ML集成]
                    F --> H[区块链技术]
                    F --> I[物联网]
                    G --> J[个性化体验]
                    H --> K[去中心化应用]
                    I --> L[智能设备]
                </div>
            </div>
        </div>

        <!-- Article with Drop Cap -->
        <article class="mb-16">
            <h2 class="text-3xl font-bold mb-8">技术写作的艺术</h2>
            <div class="bg-white rounded-lg shadow-sm p-8">
                <p class="drop-cap mb-6">在信息爆炸的时代，技术写作已成为一项至关重要的技能。优秀的文档不仅能帮助开发者更快地理解和使用技术，还能降低学习曲线，促进知识共享。</p>
                <p class="mb-6">技术写作不仅仅是记录功能的简单描述，它需要作者深入理解技术细节，同时具备将复杂概念转化为清晰、易懂的语言的能力。这要求技术写作者具备双重能力：技术专业性和沟通技巧。</p>
                <div class="bg-gray-50 p-6 rounded-lg mb-6">
                    <h4 class="font-bold text-lg mb-3"><i class="fas fa-lightbulb text-yellow-500 mr-2"></i>技术写作最佳实践</h4>
                    <ul class="space-y-2">
                        <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i> <span>了解你的受众：针对不同技术水平的读者调整内容深度</span></li>
                        <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i> <span>结构清晰：使用标题、列表和格式增强可读性</span></li>
                        <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i> <span>代码示例：提供实际可运行的示例代码</span></li>
                        <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i> <span>持续更新：随着技术迭代保持文档最新</span></li>
                    </ul>
                </div>
                <p>随着开源文化的普及，技术写作已经成为开源项目成功的关键因素之一。优秀的文档可以吸引更多的贡献者，提高项目的采用率。同时，技术写作技能也日益成为开发者职业发展的重要加分项。</p>
            </div>
        </article>
    </main>

    <!-- Footer -->
    <footer class="footer py-12">
        <div class="max-w-6xl mx-auto px-4 text-center">
            <div class="mb-6">
                <h3 class="text-2xl font-bold mb-2">技术小馆</h3>
                <p class="text-gray-300">探索技术的无限可能</p>
            </div>
            <div>
                <a href="http://www.yuque.com/jtostring" class="inline-flex items-center hover:text-blue-300 transition-colors">
                    <i class="fas fa-globe mr-2"></i> www.yuque.com/jtostring
                </a>
            </div>
            <div class="mt-8 pt-8 border-t border-gray-700">
                <p class="text-gray-400 text-sm">© 2023 技术小馆 版权所有</p>
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>